<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

        <script>
            // 节点类型
            // 1. 元素节点：比如 <p> 和 <div>。
            // 2. 文本节点：包含在元素中的文本（例如 <p>元素中的文本）。
            // 3. 属性节点：元素属性。比如href、src

            // 主要对元素节点进行操作：查找、添加、删除

            // 1. 查找节点
            // 1.1 元素.parentNode 查找父节点，获取的是最近的父节点
            // 1.2 元素.childNodes 查找子节点，获取的是所有子节点（包括文本属性等等） children 只获取最近的子元素节点 返回值是一个伪数组
            const ul = document.querySelector('ul');
            console.log(ul.childNodes);
            const firstElementChild = ul.firstElementChild;
            const lastElementChild = ul.lastElementChild;
            // 1.3 查找兄弟节点：元素.nextElementSibling 下一个兄弟元素节点，元素.previousElementSibling 上一个兄弟元素节点
            // 元素.nextSibling 下一个节点（所有类型），元素.previousSibling 上一个节点（所有类型）
            const li1 = document.querySelector('li:nth-child(1)');
            const li2 = li1.nextElementSibling;

            // 2. 添加节点
            // 2.1 创建节点 document.createElement('标签名')
            // 2.2 插入节点 父元素.appendChild(新节点) 在父元素的最后一个子节点后面追加
            // 2.3 插入节点 父元素.insertBefore(新节点, 参考节点) 在参考节点前面插入


            // 3. 克隆节点
            // 元素.cloneNode(true) true表示深度克隆，会克隆子节点 false表示浅克隆，只克隆当前节点

            // 4. 删除节点
            // 原生DOM中，必须通过父元素删除子元素：父元素.removeChild(子元素)


        </script>

    </body>
</html>